<template>
    <Layout logo-link='/home/dashboard/app' :main-menu="mainMenu">
        <div slot='privilege'>
           <Dropdown style='margin-right: 40px' trigger='click'>
                <div class='privilege-icon'>
                    <i class='iconfont icon-privilege'></i>
                </div>
                <DropdownMenu slot="list" class='privilege-dropdown-menu'>
                    <div v-if='privilege.length'>
                        <div style='display:flex;align-items:center;width:100%'>
                            <div class='privilege-dropdown'>
                                <DropdownItem v-for='(item,index) in privilege' :key='item' v-show='index<2'>
                                    <div @click='privilegeLink(item.id)'>
                                        <div class='privilege-dropdown-icon'>
                                            <i class='iconfont' :class='item.icon'></i>
                                        </div>
                                        <div class='privilege-dropdown-word'>{{item.name}}</div>
                                    </div>
                                </DropdownItem>
                            </div>
                        </div>
                        <div v-if='privilege.length>2' style='display:flex;align-items:center;width:100%;margin-top:20px'>
                            <div class='privilege-dropdown'>
                                <DropdownItem v-for='(item,index) in privilege' :key='item' v-show='index>=2'>
                                    <div @click='privilegeLink(item.id)'>
                                        <div class='privilege-dropdown-icon'>
                                            <i class='iconfont' :class='item.icon'></i>
                                        </div>
                                        <div class='privilege-dropdown-word'>{{item.name}}</div>
                                    </div>
                                </DropdownItem>
                            </div>
                        </div>
                    </div>
                    <div style='text-align:center' v-else>
                        <div class='privilege-no'>暂无特权</div>
                        <DropdownItem>
                            <div @click='privilegeMore'>
                                <div class='privilege-more'>更多特权</div>
                            </div>
                        </DropdownItem>
                    </div>
                </DropdownMenu>
            </Dropdown>
        </div>
        <Dropdown slot='app' class='layout-header-app' @on-click='changeApp' trigger='click'>
            <div style='position:relation;height:64px'>
                <span class='layout-header-app-name'>{{appName}}</span>
                <Icon type="chevron-down" color='#9ea7b4' size='10' class='layout-header-app-icon'></Icon>
            </div>
            <DropdownMenu slot="list" class='dropmenu-head layout-app-list'>
                <DropdownItem v-for='item in appList' :key='item' :name='item.baas_token'>{{item.baas.name}}</DropdownItem>
            </DropdownMenu>
        </Dropdown>
    </Layout>
</template>
<script>
    import Layout from './../../../components/layout.vue';
    import axios from 'axios';
    export default { 
        data(){
            const link = 'https://cloud.qingful.com/doc/#/zh-cn/'
            return {
                mainMenu: [
                    {
                        name: '统计',
                        title:'统计',
                        icon: 'icon-icon-test2',
                        url:'/home/statistic/statistic',
                        subMenu:[]
                    },
                    {
                        name: '数据',
                        title:'数据库',
                        icon: 'icon-icon-test14',
                        url:'/home/data/table',
                        link:`${link}table`,
                        subMenu:[]
                    },
                    {
                        name: '模型',
                        title:'模型管理',
                        icon: 'icon-icon-test31',
                        url:'',
                        subMenu:[
                            {
                                name:'模型',
                                url:'/home/schema/schema',
                                link:`${link}table?id=%e6%a8%a1%e5%9e%8b%e7%ae%a1%e7%90%86`
                            },
                            {
                                name:'关联',
                                url:'/home/schema/relation',
                                link:`${link}table?id=%e5%85%b3%e8%81%94%e6%a8%a1%e5%9e%8b`
                            }
                        ]
                    },
                    {
                        name: '权限',
                        title:'权限管理',
                        icon: 'icon-icon-test9',
                        url:'',
                        subMenu:[
                            {
                                name:'分组',
                                url:'/home/auth/class',
                                link:`${link}quickstart?id=_2%e8%ae%be%e7%bd%ae%e5%88%86%e7%bb%84`
                            },
                            {
                                name:'密钥',
                                url:'/home/auth/key',
                                link:`${link}quickstart?id=_1%e8%ae%be%e7%bd%ae%e5%af%86%e9%92%a5`
                            },
                            {
                                name:'组权限',
                                url:'/home/auth/auth',
                                link:`${link}quickstart?id=_3%e8%ae%be%e7%bd%ae%e7%bb%84%e6%9d%83%e9%99%90`
                            },
                            {
                                name:'表权限',
                                url:'/home/auth/table',
                                link:`${link}quickstart?id=_4%e8%ae%be%e7%bd%ae%e8%a1%a8%e6%9d%83%e9%99%90`
                            },
                            {
                                name:'字段',
                                url:'/home/auth/fields',
                                link:`${link}quickstart?id=_5%e8%ae%be%e7%bd%ae%e5%ad%97%e6%ae%b5`
                            }
                        ]
                    },
                    {
                        name: '文件',
                        title:'文件管理',
                        icon: 'icon-icon-test3',
                        url:'',
                        subMenu:[
                            {
                                name:'文件',
                                url:'/home/file/file',
                            },
                            {
                                name:'网站',
                                url:'/home/file/web',
                            }
                        ]
                    },
                    
                     {
                        name: '引擎',
                        title:'引擎管理',
                        icon: 'icon-icon-test6',
                        url:'',
                        subMenu:[
                            {
                                name:'云函数',
                                url:'/home/engine/func',
                                link:`${link}cloudFunction`
                            },
                            {
                                name:'计划任务',
                                url:'/home/engine/task',
                                link:`${link}quickstart?id=_2%e5%88%9b%e5%bb%ba%e8%ae%a1%e5%88%92%e4%bb%bb%e5%8a%a1`
                            },
                            {
                                name:'日志',
                                url:'/home/engine/log',
                            },
                            {
                                name:'调试',
                                url:'/home/engine/debug',
                                link:`${link}debug/wxa`
                            },
                        ]
                    },
                     {
                        name: '插件',
                        title:'文档',
                        icon: 'icon-icon-test1',
                        url:'/home/plugin/plugin',
                        subMenu:[]
                    },
                     {
                        name: '设置',
                        title:'设置',
                        icon: 'icon-icon-test10',
                        url:'',
                        subMenu:[
                            {
                                name:'基本信息',
                                url:'/home/config/config',
                            },
                            {
                                name:'应用特权',
                                url:'/home/privilege/privilege',
                            }
                        ]
                    },
                ],
                appName:'',
                appList:[],
                name:'',
                userType:0,
                privilege:[]
            }

        },
        components: {
            Layout
        },
        created(){
            axios.defaults.headers.common["BaasToken"] = localStorage.BaasToken;
            this.$bus.on('refreshApp',res => {
                this.appName = localStorage.app_name;
                this.getApplist();
            });
            //当前应用名字
            this.appName = localStorage.app_name;
            //获取所有应用
            this.getApplist();
            this.$bus.on('userType',res=>{
                this.userType = res.type;
            })
            
            this.$bus.on('ownerPrivilege',(res)=>{
                if(res){
                    this.getPrivilege();
                    return
                }
            })
            this.getPrivilege();
        },
        methods:{
            getApplist(){
                this.fetch('/home/apps').then(res=>{
                    if(res&&res.data.code&&res.data.data){
                        this.appList = res.data.data.appList;
                        // for(let i = 0; i < this.appList.length; i++){
                        //     if(this.appList[i].name == this.appName){
                        //         this.appList.splice(i,1)
                        //     }
                        // }
                    }
                })
            },
            //切换应用
            changeApp(baas_token){
                axios.defaults.headers.common["BaasToken"] = baas_token;
                this.$localStorage.set('BaasToken',baas_token)
                this.fetch('/home/app/baasInfo').then(res=>{
                    if(res&&res.data.data&&res.data.code){
                       this.$localStorage.set('app_name',res.data.data.name)
                       this.$localStorage.set('appid',res.data.data.appid)
                       // this.$localStorage.set('appkey',res.data.data.appkey)
                       // 清空剪切板
                       if(localStorage.clipStatus!=-1){
                            this.$localStorage.remove('copyName')
                            this.$localStorage.remove('copyPath')
                            this.$localStorage.set('clipStatus',-1)
                        }
                        const fullPath = this.$route.fullPath;
                        if(fullPath.indexOf('?name')!=-1){
                            this.$router.push('/home/data/table')
                        }
                        this.$router.go(0)
                       
                    }
                })
            },
            //特权
            getPrivilege(){
                this.fetch('/home/app/config/privilege/list').then(res=>{
                    if(res&&res.data.data){
                        let data = res.data.data;
                        this.privilege = [];
                        for(let key in data){
                            if(data[key].owner){
                                this.privilege.push(data[key])
                            }
                        }
                    }
                })
            },
            privilegeLink(id){
                this.$bus.emit('showPrivilege',id)
                this.$router.push({ name: 'privilege', params: { id:id }})
            },
             privilegeMore(){
                this.$router.push('/home/privilege/privilege')
            }
        }
    }
</script>
<style scoped>
    .privilege-dropdown-menu{
        width:200px;
        min-height:110px;
        padding:15px;
        line-height: 1
    }
    .privilege-dropdown-menu .ivu-dropdown-item{
        padding:0;
        line-height: 1;
    }
    .privilege-dropdown-menu .ivu-dropdown-item:hover{
        background: #fff;
    }
    .privilege-icon{
    position: relative;
    height: 64px;
    line-height: 64px;
    }
    .privilege-icon i{
        font-size:28px;
        color:#ffae12
    }
    .privilege-dropdown{
        width:100%;
        display: flex;
        justify-content:space-around;
    }
    .privilege-dropdown-icon{
        width:40px;
        height:40px;
        margin: 0 auto;
        background:#fff7e7;
        border-radius: 50%;
        position: relative;
        overflow:hidden
    }
    .privilege-dropdown-icon i{
        font-size:30px;
        color:#ffae12;
        position: absolute;
        top:50%;
        left:50%;
        margin:-15px 0 0 -15px;
    }
    .privilege-dropdown-word{
        font-size:14px;
        color:#657180;
        margin-top:10px
    }
    .privilege-dropdown-word:hover{
        color:#464C5B;
    }
    .privilege-no{
        font-size:14px;
        color:#657180;
        margin-top: 10px
    }
    .privilege-more{
        font-size:12px;
        color:#F6C075;
        width:90px;
        height:30px;
        margin:16px auto;
        line-height: 30px;
        text-align:center;
        border-radius:3px;
        border:1px solid #F6C075
    }
    .privilege-more:hover{
        background: #F6C075;
        color:#fff;
    }
    .layout-app-list{
        width:150px;
        text-align:left;
        max-height:400px;
        overflow-y:auto;
        overflow-x:hidden
    }
    .layout-header-app{
        width:150px;
        margin:0 5px;
        line-height: 64px;
        cursor:pointer
    }
    .layout-header-app-name{
        color:#464C5B;
        font-size:16px;
        display:inline-block;
        white-space: nowrap;
        text-overflow:ellipsis;
        overflow: hidden;
        max-width: 120px;
        margin-left: -16px
    }
    .layout-header-app-icon{
        position:absolute;
        margin-left: 5px;
        line-height: 64px
    }
</style>

